<template>
    <div class="wrap">
        <CateList dictionaryKey="materialLibrary" :search="handleSearch" v-model:form="searchParams"></CateList>
        <div class="wrap_right">
            <BaseForm ref="searchForm" type="search" :items="formItems" v-model:form="searchParams" @search="handleSearch">
                <template #suffix-button>
                    <el-button type="primary" @click="handleEdit({})">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        添加
                    </el-button>
                </template>
            </BaseForm>

            <BaseTable ref="baseTable" :getTableDataFn="libraryService.getPageList" :searchParams="searchParams"
                :serial="true" :select="true" :handleDisable="handleDisable">
                <template #select>
                    <el-table-column type="selection" width="55" />
                </template>
                <el-table-column prop="materialName" label="素材名称" minWidth="150" />

                <el-table-column prop="typeName" label="所属分类" minWidth="120" />
                <el-table-column prop="updateUserName" label="最后修改人" />
                <el-table-column prop="updateTime" label="最后修改时间" width="170">
                    <template #header>
                        <span>最后修改时间</span>
                        <SortTable :sortTablekey="sortTablekey" @click="sortTablekey = 1" :handleSearch="handleSearch">
                        </SortTable>
                    </template>
                </el-table-column>
                <el-table-column prop="isDisable" label="状态" width="60">
                    <template #default="scope">
                        <isDisableStatus :status="scope.row.isDisable"></isDisableStatus>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template #default="scope">
                        <el-link :underline="false" link type="primary" size="small"
                            @click.prevent="handleEdit(scope.row)">编辑</el-link>
                        <el-link :underline="false" link type="primary" size="small"
                            @click.prevent="handleDisable(scope.row)">{{ scope.row.isDisable == 1 ? '启用' : '停用' }}</el-link>
                        <el-link :underline="false" link type="danger" size="small"
                            @click.prevent="handleDel(scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </BaseTable>
        </div>
        <EditForm v-if="visibleEditForm" :searchParams="searchParams" v-model:dialogVisible="visibleEditForm" :item="item"
            :handleSearch="handleSearch"></EditForm>
    </div>
</template>

<script setup lang="ts">
import EditForm from './EditForm.vue'
import { libraryService } from '@/api/library'
import openMsgBox from '@/hooks/messageBox.js'
import { userService } from '@/api/user'
const userOptions = ref([]);
const formItems = ref([
    {
        name: '素材名称',
        key: 'materialName',
        type: 'input',
    },
    {
        name: '最后修改人',
        key: 'updateUserId',
        type: 'select',
        options: userOptions
    },
    {
        name: '状态',
        key: 'isDisable',
        type: 'select',
        options: [
            { label: '启用', value: 0 },
            { label: '停用', value: 1 },
        ],
    },
])
const searchParams = ref({
    materialName: '',
    updateUserId: '',
    isDisable: '',
})

onMounted(() => {
    userService.getList({ data: {} }).then((res) => {
        userOptions.value = res.data.map((n) => {
            return {
                label: n.userName,
                value: n.userId,
            }
        })
    })
})
const baseTable = ref(null)
const sortTablekey = ref(1)
const handleSearch = (data = { sort: undefined }, e = '') => {
    searchParams.value.type = searchParams.value.typeId
    if (e != 'sort') sortTablekey.value = 0
    baseTable.value.handleSearch({
        ...searchParams.value,

        updateTimeOrder: data?.sort,
    })
}
const item = ref({})
const visibleEditForm = ref(false)
const handleEdit = (row) => {
    item.value = { ...row }
    visibleEditForm.value = true
}
const handleDel = (row) => {
    openMsgBox(
        {},
        () => {
            return libraryService.delete({ data: row.materialId })
        },
        () => {
            handleSearch()
        }
    )
}
const handleDisable = (row, rows = []) => {
    let isDisable = row.materialId?row.isDisable : row 
    
    let ids = row.materialId ? [row.materialId] : rows.map((e) => e.materialId)

    openMsgBox(
        {
            tips: `是否确定${isDisable == 1 ? '启用' : '停用'}?`,
        },
        () => {
            return libraryService.changeStatus({
                data: { materialIds: ids, isDisable: isDisable==1?0:1 },
            })
        },
        () => {
            handleSearch()
        }
    )
}
</script>

<style lang="less" scoped></style>
